<template>
  <div class="home">
    <div class="Left_con">
      <v-touch v-on:panleft="callbackleft"  v-on:panright="callbackright" v-on:panend="callbackup" class="wrapper" ref="tapper">
        <ul :style="{width:Ulwidth+'px',transform:slateY,transition:tran }">
          <li v-for="times in GoodsListArray" :style="{width:Liwidth+'px'}">
            <div class="Left_img">
              <img :src="times.image" alt="">
            </div>
            <div class="Left_prixce">
            <span class="Left_new-price">
              <em>￥</em>
              {{times.price}}
            </span>
              <span class="Left_original-price">
                <em>￥</em>
              {{times.price}}
            </span>
            </div>
          </li>
        </ul>
      </v-touch>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      GoodsListArray: {
        type: Array,
        default() {
          return []
        }
      }
    },
    components: {},
    data() {
      return {
        Liwidth: 0,
        Ulwidth: 0,
        tran:'initial',
        slateY:'translate3d(0px, 0px, 0px)',
      }
    },
    methods: {
      callbackleft(e){
 console.log(e);
 // this.slateY = `translate3d(${e.deltaX}px, 0px, 0px)`
      },
      callbackright(e){
        // console.log(e.deltaX);
        this.slateY = `translate3d(${e.deltaX}px, 0px, 0px)`
      },
      callbackup(e){
        // this.tran='all 0.5s';
      },

      GetHeight() {  //分类的高度
        setTimeout(() => {
          if (this.GoodsListArray) {
            this.Liwidth = (window.screen.width / 4) - 10;
            this.Ulwidth = this.GoodsListArray.length * (window.screen.width / 4);
            return false;
          } else {
            this.GetHeight();
          }
        }, 1)
      },
    },
    watch: {},
    computed: {
      //计算属性
    },
    created() {

    },
    mounted() {
      this.GetHeight()
    }
  }
</script>
<style scoped>
  .home {
    width: 100%;
    height: 100%;
  }

  .Left_con {
    /*height: ;*/
    overflow: hidden;

  }

  .Left_con ul {
    background-color: #fff;
    padding-left: .3125rem;
  }

  .Left_con ul li {
    float: left;
  }

  .Left_img {
    width: 100%;
    padding: 0 .3125rem;
  }

  .Left_img img {
    display: block;
    background-size: 100%;
    opacity: 1;
    width: 100%;
    height: auto;
    overflow: hidden;
    -webkit-transition: opacity .3s ease-in;
  }

  .Left_prixce {
    margin: 0 auto;
    text-align: center;
    width: 100%;
    padding: 0 .3125rem;
  }

  .Left_new-price {
    margin-top: 10px;
    display: block;
    color: #f23030;
    font-size: 16px;
    line-height: 16px;
    height: 16px;
    text-align: center;
    font-weight: 700;
  }

  .Left_original-price {
    color: #686868;
    font-size: 12px;
    line-height: 12px;
    margin: 4px 0 11px;
    text-align: center;
    display: block;
    padding: 0 2px;
    display: inline-block;
    position: relative;
  }
</style>
